﻿$(function ()
{
    $('#myCarousel').carousel({
        interval: 4000
    });

    // handles the carousel thumbnails
    $('[id^=carousel-selector-]').click(function ()
    {
        var id_selector = $(this).attr("id");
        var id = id_selector.substr(id_selector.length - 1);
        id = parseInt(id);
        $('#myCarousel').carousel(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slid.bs.carousel', function (e)
    {
        var id = $('.item.active').data('slide-number');
        id = parseInt(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id=carousel-selector-' + id + ']').addClass('selected');
    });


    /* copy loaded thumbnails into carousel */
    $('.row .thumbnail').on('load', function () { }).each(function (i)
    {
        //if (this.complete)
        //{
        var item = $('<div class="item"></div>');
        var itemDiv = $(this).parents('div');
        var title = $(this).parent('a').attr("title");

        item.attr("title", title);
        $(itemDiv.html()).appendTo(item);
        item.appendTo('.carousel-inner');
        if (i == 0)
        {
            // set first item active
            item.addClass('active');
        }
        //}
    });

    /* activate the carousel */
    $('#modalCarousel').carousel({ interval: false });

    /* change modal title when slide changes */
    $('#modalCarousel').on('slid.bs.carousel', function ()
    {
        $('.modal-title').html($(this).find('.active').attr("title"));
    })

    /* when clicking a thumbnail */
    $('.row .thumbnail').click(function ()
    {
        var idx = $(this).parents('div').index();
        var id = parseInt(idx);
        $('#myModal').modal('show'); // show the modal
        $('#modalCarousel').carousel(id); // slide carousel to selected

    });

});